<template>
	<view style="display: flex;flex-direction: column;align-items: center;">
		<view style="padding: 15rpx 30rpx; width: 100%;background-color: #fff;">
			<view class="headerWrapper">
				位置栏
				<u-switch v-model="showLocation"   size="40"></u-switch>
			</view>
		</view>
		<view class="mapWrapper">		
			<view v-if="location.name&&location.address" class="right">
				<view class="title">
					{{location.name}}
				</view>
				<view class="detail">
					{{location.address}}
				</view>
			</view>
			<view v-else class="right" style="color: #888;">
				请选择地址....
			</view>
			
			<view class="left" @click="onSetLocation">
				<image class="icon" src="@/static/image/icon_note_positon.png" mode=""></image>
				选择地址
			</view>
		</view>

		
		<view class="bottomBtnContainer">
			<view class="bottomBtnWrapper" @click="onSave">
				保存
			</view>
		</view>
	</view>
</template>

<script>
    const api = require("@/static/js/api.js")
    const utils = require("@/static/js/utils.js")
    import {
        mapState,
        mapMutations,
        mapActions
    } from 'vuex';
    let that = null

	export default {
		data() {
			return {
				showLocation: false,
				location: {
					address:"",
					name:"",
					latitude: "",
					longitude: ""
				},
				nodeObj: {},
				
			};
		},
        
        computed: {
            ...mapState({
                hasLogin: state => state.userInfo.hasLogin,
                isAuthPhone: state => state.userInfo.isAuthPhone,
                isAuthUserInfo: state => state.userInfo.isAuthUserInfo, 
                isSeller: state => state.userInfo.isSeller,
                sellerObj: state => state.userInfo.sellerObj,
                buyerObj: state => state.userInfo.buyerObj,
                shopInfo: state => state.userInfo.shopInfo,
            }),
        },
        
        onLoad(options) {
            that = this;
			if (options.obj){
				var nodeObj = JSON.parse(options.obj)
				this.nodeObj = nodeObj
				if (nodeObj){
					this.showLocation = nodeObj.showLocation||false
					if (nodeObj.location){
						var location = JSON.parse(nodeObj.location)
						if (location&&location.name&&location.address){
							this.location = location
						}				
					}
				}
			}
        },
        onShow() {
      
        },
        methods:{ 
            ...mapMutations(['setUserInfo', 'setLoginStatus', 'setUserId',"setOrigin"]),
            onSave(){
				api.getNoteUpate({
					param: {
						id: that.nodeObj.id,
						showLocation: that.showLocation,
						location: JSON.stringify(that.location),
					}
				}).then(res => {
					console.log("createNote", res)
					if (res.success) {
						uni.showToast({
							icon: "none",
							title: "保存成功"
						})
					}
				})
			},

			onSetLocation(){
				uni.chooseLocation({
					latitude: this.location.latitude,
					longitude: this.location.longitude,
					success: function(res) {
						that.location = res
						console.log(res.address)
						console.log(res.name)
						console.log(res.latitude) //维度
						console.log(res.longitude) //经度
					},
					fail(err) {
						console.log(err)
					},
					complete(a) {
						console.log(a)
					}
				});
			}		
        }
	}
</script>

<style lang="scss">
	page{
		background-color: #f8f8f8;
	}
	.headerWrapper{
		width: 100%;
		padding: 30rpx 80rpx;
		display: flex;
		justify-content: space-between;
		font-size: 30rpx;
		font-weight: bold;
		color: #3e3a39;
	}
	
	.mapWrapper {

		display: flex;
		justify-content: space-between;
		width: 714rpx;
		background: #FFFFFF;
		box-shadow: 2rpx 2rpx 2rpx 1rpx #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-top: 30rpx;
		.left {		
			width: 100rpx;
			padding: 10rpx 0;
			font-size: 20rpx;
			color: #666;
			display: flex;
			flex-direction: column;
			align-items: center;
			.icon{
				width: 74rpx;
				height: 74rpx;
				margin-bottom: 10rpx;
			}	
		}
		.right {
			width: 524rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
	
			.title {
				width: 100%;
				font-size: 30rpx;
				color: #515151;
				line-height: 42rpx;
				font-weight: bold;
				margin-bottom: 10rpx;
			}
	
			.detail {
				width: 100%;
				font-size: 22rpx;
				line-height: 26rpx;
				color: rgba(25, 25, 25, 0.5);
				min-height: 50rpx;
				margin-bottom: 20rpx;
			}
		}
	}
</style>
